<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
    <script src="lib/cuon-matrix.js"></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="500">
    请更换新版浏览器查看效果!
</canvas>
<script >

let VSHADER_SOURCE =`
  attribute vec4 a_position;
  attribute vec4 a_color;
  uniform mat4 u_mvpMatrix;
  varying vec4 v_color;
  void main() {
    gl_Position = u_mvpMatrix * a_position;;
    v_color = a_color;
  }`

// Fragment shader program
let FSHADER_SOURCE =`
  #ifdef GL_ES
  precision mediump float;
  #endif
  varying vec4 v_color;
  void main() {
  gl_FragColor=v_color;
  }`
  

function main() {
  let canvas=document.getElementById('mybox');
  let gl=getWebGLContext(canvas);
  if(!gl){
    console.log('Failed to get the rendering context for WebGL');
    return;
  }
  if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
    console.log('Failed to intialize shaders.');
    return;
  }
  let n=initVertexBuffer(gl);
  if(n<0){
    console.log('Failed to set the vertex information');
    return;
  }
  gl.clearColor(0.0,0.0,0.0,1.0);
  gl.enable(gl.DEPTH_TEST);
  let u_mvpMatrix=gl.getUniformLocation(gl.program,'u_mvpMatrix');
  if(!u_mvpMatrix){
    console.log('Failed to get the storage location of u_MvpMatrix');
    return;
  }

  let mvpMatrix=new Matrix4();
  mvpMatrix.setPerspective(30,1,1,100);
  mvpMatrix.lookAt(3,3,7,0,0,0,0,1,0);
  gl.uniformMatrix4fv(u_mvpMatrix,false,mvpMatrix.elements);
  gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}

function initVertexBuffer(gl){
  // Create a cube
  //    v6----- v5
  //   /|      /|
  //  v1------v0|
  //  | |     | |
  //  | |v7---|-|v4
  //  |/      |/
  //  v2------v3
let verticesColors=new Float32Array([
  // Vertex coordinates and color
    1.0,  1.0,  1.0,     1.0,  1.0,  1.0,  // v0 White
    -1.0,  1.0,  1.0,     1.0,  0.0,  1.0,  // v1 Magenta
    -1.0, -1.0,  1.0,     1.0,  0.0,  0.0,  // v2 Red
     1.0, -1.0,  1.0,     1.0,  1.0,  0.0,  // v3 Yellow
     1.0, -1.0, -1.0,     0.0,  1.0,  0.0,  // v4 Green
     1.0,  1.0, -1.0,     0.0,  1.0,  1.0,  // v5 Cyan
    -1.0,  1.0, -1.0,     0.0,  0.0,  1.0,  // v6 Blue
    -1.0, -1.0, -1.0,     0.0,  0.0,  0.0   // v7 Black
]);
let indices=new Uint8Array([
    0, 1, 2,   0, 2, 3,    // front
    0, 3, 4,   0, 4, 5,    // right
    0, 5, 6,   0, 6, 1,    // up
    1, 6, 7,   1, 7, 2,    // left
    7, 4, 3,   7, 3, 2,    // down
    4, 7, 6,   4, 6, 5     // back
]);
let vertexColorBuffer=gl.createBuffer();
let indexBuffer=gl.createBuffer();
if (!vertexColorBuffer || !indexBuffer) {
    return -1;
  }
  gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);
  let FSIZE=verticesColors.BYTES_PER_ELEMENT;
  let a_position=gl.getAttribLocation(gl.program,'a_position');
  if(a_position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  gl.vertexAttribPointer(a_position,3,gl.FLOAT,false,FSIZE*6,0);
  gl.enableVertexAttribArray(a_position);

  let a_color=gl.getAttribLocation(gl.program,'a_color');
  if(a_color < 0) {
    console.log('Failed to get the storage location of a_Color');
    return -1;
  }

  gl.vertexAttribPointer(a_color,3,gl.FLOAT,false,FSIZE*6,FSIZE*3);
  gl.enableVertexAttribArray(a_color);

  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);
  return indices.length;


}
</script>

</body>
</html>